import React from 'react'

import { 
  Routes, 
  Route,
  NavLink,
  useNavigate,
  Navigate
} from "react-router-dom";

import "./App.css"

import Home from './pages/home';
// import About, { AboutContact, AboutCultrue, AboutHistory } from './pages/about';
import About from './pages/about';
import Profile from './pages/profile';
import User from './pages/user';
import NoMatch from './pages/noMatch';
import Login from './pages/login';
import Product from './pages/product';
import Detail from './pages/detail';
import Detail2 from './pages/detail2';
import Detail3 from './pages/detail3';

function Expenses() {
  return (
    <div>
      <h2>expenses</h2>
    </div>
  )
}

function Favorites() {
  return (
    <div>
      <h2>收藏夹</h2>
    </div>
  )
}

// 路由表
// function SetRoutes() {
//   const routes = useRoutes([
//     {
//       path: "/",
//       element: <Home />
//     },
//     {
//       path: "/about",
//       element: <About />,
//       children: [
//         {
//           path: "",
//           element: <Navigate to="history" />
//         },
//         {
//           path: "history",
//           element: <AboutHistory />
//         },
//         {
//           path: "cultrue",
//           element: <AboutCultrue />
//         },
//         {
//           path: "contact",
//           element: <AboutContact />
//         }
//       ]
//     },
//     {
//       path: "/Profile",
//       element: <Profile />
//     }
//   ])
//   return routes
// }



// export default class App extends PureComponent {
  // render() {
export default function App() {
  const navigate = useNavigate();
  const id = "1681515303a";
  const info = { title: "详情", desc: "这是一段描述", msg: "哈哈哈呵呵呵嘻嘻嘻" };
  return (
    <div>
        {/* <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Link to="/profile">我的</Link> */}

        {/* <NavLink to="/" style={({isActive}) => { return {color: isActive ? "red" : ""}}}>首页</NavLink>
        <NavLink to="/about" style={({isActive}) => { return {color: isActive ? "red" : ""}}}>关于</NavLink>
        <NavLink to="/profile" style={({isActive}) => { return {color: isActive ? "red" : ""}}}>我的</NavLink> */}

        <NavLink to="/" className={({isActive}) => isActive ? "link_active" : ""}>首页</NavLink>
        <NavLink to="/about" className={({isActive}) => isActive ? "link_active" : ""}>关于</NavLink>
        <NavLink to="/profile" className={({isActive}) => isActive ? `profile ${'link_active'}` : ""}>我的</NavLink>
        <NavLink to="/paita123abc" className={({isActive}) => isActive ? 'link_active' : ""}>排它</NavLink>
        <NavLink to="/user" className={({isActive}) => isActive ? 'link_active' : ""}>用户</NavLink>
        
        <button onClick={() => navigate("/product")}>go Product</button>

        {/* params参数传递 */}
        <NavLink className={({isActive}) => isActive ? 'link_active' : ""} to={`/detail/${id}`}>详情</NavLink>
        {/* search参数传递 */}
        <NavLink className={({isActive}) => isActive ? 'link_active' : ""} to={`/detail2?name=ACE&age=22`}>详情2</NavLink>
        {/* state参数传递 */}
        <NavLink className={({isActive}) => isActive ? 'link_active' : ""} to={`/detail3`} state={info}>详情3</NavLink>

        <Routes>
                {/* exact 默认为true  false是模糊匹配 就是route到/about页面时 也会把带/ 的页面渲染出来*/}
          <Route path="/" element={<Home />} />
          <Route path="/about/*" element={<About navigate={navigate} />} />
          <Route path="/Profile/*" element={<Profile />}>
            <Route path="" element={<Navigate to="expenses" />}></Route>
            <Route path="expenses" element={<Expenses />}></Route>
            <Route path="favorites" element={<Favorites />}></Route>
          </Route>
          {/* <Route path="/:id" element={<User />} 第一遍注释暂时不用/> */}
          <Route path="*" element={<NoMatch />} />

          <Route path="/user" element={<User />} />
          <Route path="/login" element={<Login />} />

          <Route path="/product" element={<Product />} />
          {/* :id 变量声明 取值时 {}.id */}
          <Route path="/detail/:id" element={<Detail />} />
          {/* 无需声明，正常注册即可 */}
          <Route path="/detail2" element={<Detail2 />} />
          {/* 无需声明，正常注册即可 */}
          <Route path="/detail3" element={<Detail3 />} />
        </Routes>

        {/* <h2>路由表↓</h2> */}
        {/* <SetRoutes /> */}
        
    </div>
  )
}

  // }
// }
